<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="f"  uri="http://java.sun.com/jsf/core"%>
<%@ taglib prefix="h"  uri="http://java.sun.com/jsf/html"%>
<%@ taglib uri="http://richfaces.org/a4j" prefix="a4j" %>
<%@ taglib uri="http://richfaces.org/rich" prefix="rich" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>user-list</title>
</head>


<link rel="stylesheet" href="../css/css1.css" type="text/css" />
<script type="text/javascript" src="../js/common.js"></script>
<script type="text/javascript" src="../js/validate.js"></script>
<script type="text/javascript" src="../js/myValidate.js"></script>
<script>
<!--
window.onload = function() {
	searchForList();
}

//search button click
function searchForList() {
	document.getElementById('hForm:searchTable:0:searchBtn').click();
}

function preventAheadTime(day) {
	var curDt = new Date();
	if ((curDt.getTime() - day.date.getTime()) < 0) {
		return false;
	} else {
		return true;
	}
}

//检查checkBox选中了几个 
function selectCount() {
	var selectCount = document.getElementById('hForm:selectCount').value;
	if(selectCount != 1) {
		alert('plz select one data in checkBox!' + selectCount);
		return false;
	}
	return true;
}

function openUpdatePage() {
	if(selectCount() == false) {
		return;
	}
	window.showModalDialog('user-update.faces');
}
-->
</script>


<body>
<f:view>
 <h:form id="hForm">
 	<h:inputHidden id="selectCount" value="#{UserManagedBean.selectCount }"></h:inputHidden>
	<!-- search condition(set searchVo) -->
	
 	<rich:dataTable id="searchTable" value="#{UserManagedBean.searchVo }" var="searchVo">
		<rich:column styleClass="TxtCenter">
			<f:facet name="header">
				<h:outputText value="id"/>
			</f:facet>
				<h:inputText id="id" value="#{searchVo.id }"></h:inputText>
		</rich:column> 
		<rich:column>
			<f:facet name="header">
				<h:outputText value="name"/>
			</f:facet>
				<h:inputText id="name" value="#{searchVo.name }"></h:inputText>
		</rich:column>				
		<rich:column>	
			<f:facet name="header">
				<h:outputText value="gender"/>
			</f:facet>
				<h:selectOneRadio value="#{searchVo.gender }">
					<f:selectItem itemLabel="male" itemValue="0"/>
					<f:selectItem itemLabel="female" itemValue="1"/>
				</h:selectOneRadio>
		</rich:column> 		
		<rich:column  styleClass="TxtCenter">
			<f:facet name="header">
				<h:outputText value="birthdate scope"/>
			</f:facet>
				<rich:calendar id="startBirthdate" 
					value="#{searchVo.startBirthdate  }"
					isDayEnabled="preventAheadTime"
					datePattern="yyyy-MM-dd" popup="true" inputSize="23"
					inputClass="inputText" enableManualInput="false" 
					/>
				until	
			<f:facet name="header">
				<h:outputText value="birthdate scope"/>
			</f:facet>
				<rich:calendar id="endBirthdate" 
					value="#{searchVo.endBirthdate  }"
					isDayEnabled="preventAheadTime"
					datePattern="yyyy-MM-dd" popup="true" inputSize="23"
					inputClass="inputText" enableManualInput="false" 
					/>
		</rich:column> 	
		<rich:column  styleClass="TxtCenter">
			
			<a4j:commandButton id="searchBtn" value="search" styleClass="btn"
							   action="#{UserManagedBean.selectForList }" 
							   reRender="searchResultTable"
							   onmouseover="mOverBtn(this,'Find')"
							   onmouseout="mOutBtn(this,'Find')">
				<f:setPropertyActionListener value="searchVo" target="#{UserManagedBean.searchVo }"/>
			</a4j:commandButton>
		</rich:column>
 	</rich:dataTable>
 	
 	<!-- operate(such as:update.....) -->
 	<table id="operateTable">
		<tr>
		<!-- update this user -->
			<a4j:commandButton id="updateBtn" value="update"
							   styleClass="btn"	
							   onmouseover="mOverBtn(this,'Find')"
							   onmouseout="mOutBtn(this,'Find')"
							   action="#{UserManagedBean.pageShowUpdate }"
							   reRender="selectCount"
							   oncomplete="openUpdatePage();">
			</a4j:commandButton>
		</tr>
 	</table>
 
 	<!-- search result list -->
 	
	<rich:dataTable id="searchResultTable" var="rowDataVo" value="#{UserManagedBean.userList }" width="1000">
		<rich:column width="5%" styleClass="TxtCenter">
			<f:facet name="header">
				<h:outputText id="select" value="select"/>
			</f:facet>
			<a4j:commandLink immediate="false"
				requestDelay="0" ignoreDupResponses="true"
				reRender="searchResultTable,selectCount">
				<h:selectBooleanCheckbox id="checkBox"
					value="#{UserManagedBean.selectMap[rowDataVo.id]}" />
			</a4j:commandLink>
		</rich:column>
		<rich:column  width="20%" styleClass="TxtCenter">
			<f:facet name="header">
				<h:outputText value="id" />
			</f:facet>
			<h:outputText value="#{rowDataVo.id}" />
		</rich:column>		
		<rich:column width="20%" styleClass="TxtCenter">
			<f:facet name="header">
				<h:outputText value="name" />
			</f:facet>
			<h:outputText value="#{rowDataVo.name}" />
		</rich:column>
		<rich:column width="20%" styleClass="TxtCenter">
			<f:facet name="header">
				<h:outputText value="gender" />
			</f:facet>
			<h:outputText value="#{rowDataVo.gender}" />
		</rich:column>
		<rich:column width="20%" styleClass="TxtCenter">
			<f:facet name="header">
				<h:outputText value="birthdate" />
			</f:facet>
			<h:outputText value="#{rowDataVo.birthdate}" >
			<f:convertDateTime pattern="yyyy-MM-dd" />
			</h:outputText>
		</rich:column>
		<rich:column width="20%" styleClass="TxtCenter">
			<f:facet name="header">
				<h:outputText value="status" />
			</f:facet>
			<h:outputText value="#{rowDataVo.status}" >
			</h:outputText>
		</rich:column>
		<rich:column width="20%" styleClass="TxtCenter">
			<f:facet name="header">
				<h:outputText value="permission" />
			</f:facet>
			<h:outputText value="#{rowDataVo.permission}" >
			</h:outputText>
		</rich:column>		
		<rich:column width="15%" styleClass="TxtCenter" >
			<f:facet name="header">
				<h:outputText value="operate" />
			</f:facet>
			<a4j:commandLink styleClass="TdTextlj" 
				action="#{UserManagedBean.selectByPK}"
				oncomplete="Richfaces.showModalPanel('userDetailPanel');"
				reRender="userDetailPanel"
				value="detail">
				<f:setPropertyActionListener value="#{rowDataVo.id}"
					target="#{UserManagedBean.user.id}" />
			</a4j:commandLink>
			<rich:spacer styleClass="LinkRichSpacer" /><rich:spacer styleClass="LinkRichSpacer" /><rich:spacer styleClass="LinkRichSpacer" />
			<a4j:commandLink styleClass="TdTextlj" 
				onclick="javascript:if(!confirm('confirm delete this user?')) return false;"
				action="#{UserManagedBean.deleteByPK}"
				value="delete ">
				<f:setPropertyActionListener value="#{rowDataVo.id}"
					target="#{UserManagedBean.user.id}" />
			</a4j:commandLink>
			<rich:spacer styleClass="LinkRichSpacer" />			
		</rich:column>			
	</rich:dataTable>


<!-- 弹出ModalPanel 查看用户详细信息 -->
<rich:modalPanel id="userDetailPanel"  height="120" width="580">
<f:facet name="header">
	<h:outputText value="user detail"/>
</f:facet>
<f:facet name = "controls">
	<span style="cursor:pointer" onclick="javascript:Richfaces.hideModalPanel('userDetailPanel');">X</span>
</f:facet>
<rich:dataTable value="#{UserManagedBean.user }" var="user">
	<rich:column>
		<f:facet name="header">
			<h:outputText styleClass="headerText" value="id"/>
		</f:facet>
			<h:outputText value="#{user.id }"/>
	</rich:column>
	<rich:column>
		<f:facet name="header">
			<h:outputText styleClass="headerText" value="name"/>
		</f:facet>
			<h:outputText value="#{user.name }"/>
	</rich:column>	
	<rich:column>
		<f:facet name="header">
			<h:outputText styleClass="headerText" value="gender"/>
		</f:facet>
			<h:outputText value="#{user.gender }"/>
	</rich:column>	
	<rich:column>
		<f:facet name="header">
			<h:outputText styleClass="headerText" value="birthdate"/>
		</f:facet>
		<h:outputText value="#{user.birthdate }">
			<f:convertDateTime pattern="yyyy-MM-dd" />
		</h:outputText>
	</rich:column>
	<rich:column>
		<f:facet name="header">
			<h:outputText styleClass="headerText" value="registertime"/>
		</f:facet>
		<h:outputText value="#{user.registertime }">
			<f:convertDateTime pattern="yyyy-MM-dd" />
		</h:outputText>
	</rich:column>
	<rich:column>
		<f:facet name="header">
			<h:outputText styleClass="headerText" value="permission"/>
		</f:facet>
			<h:outputText value="#{user.permission }"/>
	</rich:column>	
	<rich:column>
		<f:facet name="header">
			<h:outputText styleClass="headerText" value="status"/>
		</f:facet>
			<h:outputText value="#{user.status }"/>
	</rich:column>		
</rich:dataTable>
</rich:modalPanel>
</h:form>
</f:view>
</body>
</html>